<template>
	<view class="content">
		<uni-nav-bar fixed class="unibarS">
			<view class="input-view">
				<u-tabs :list="list1" :current="current" @click="clickTabs"></u-tabs>
			</view>
			<block slot="right">
				<uni-icons @click="goSearch()" type="search" size="26"></uni-icons>
			</block>
		</uni-nav-bar>
		<view class="text-area">
			<!-- 数据看板 -->
			<DataBoard v-if="tabIndex == 1"></DataBoard>
			<!-- 今日日程 -->
			<Schedule v-if="tabIndex == 2"></Schedule>
			<!-- 待办事项 -->
			<ToDo v-if="tabIndex == 3"></ToDo>
		</view>
		<!-- 悬浮窗 添加按钮 -->
		<uni-fab ref="fab" @fabClick="addHandle" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" />

		<!-- 弹出框 -->
		<uni-popup ref="popup" @close="closePopup" @maskClick="maskClick" :is-mask-click="false" type="bottom">
			<view class="popup-container">
				<view class="popup-content">
					<view @click="addCustomer">
						<image style="width: 58px; height: 58px;" src="/static/img/index/add_1.png"></image>
						<view>新建客户</view>
					</view>
					<view @click="addFollow">
						<image style="width: 58px; height: 58px;" src="/static/img/index/add_2.png"></image>
						<view>写新跟进</view>
					</view>
					<view @click="addOrder">
						<image style="width: 58px; height: 58px;" src="/static/img/index/add_3.png"></image>
						<view>新建订单</view>
					</view>
					<view @click="addRefund">
						<image style="width: 58px; height: 58px;" src="/static/img/index/add_4.png"></image>
						<view>新建回款</view>
					</view>
				</view>
				<view class="drawer-footer">
					<uni-icons type="closeempty" size="28" @click="maskClick"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import Schedule from "./components/schedule.vue"
import DataBoard from "./components/dataBoard.vue"
import ToDo from "./components/toDo.vue"
export default {
	components: {
		Schedule,
		DataBoard,
		ToDo
	},
	data() {
		return {
			tabIndex: 1,
			current: 0,
			list1: [{
				name: '数据看板',
				type: 1
			}, {
				name: '今日日程',
				type: 2
			}, {
				name: '代办事项',
				type: 3
			}],
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#4DACB1',
				iconColor: '#fff'
			},
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'horizontal',
		}
	},
	onLoad: function (options) {
    },
	created(options) {
	},
	onShow: function (options) {
		this.noMessage()

		let ind = getApp().globalData.tabIndex
		if(!ind) return
		this.tabIndex = ind
		this.current = 2
		getApp().globalData.tabIndex = null
	},
	methods: {
		clickTabs(item) {
			this.tabIndex = item.type;
		},
		addHandle() {
			this.$refs.popup.open()
			uni.hideTabBar();
		},
		maskClick() {
			this.$refs.popup.close()
			uni.showTabBar();
		},
		// 添加客户
		addCustomer() {
			uni.navigateTo({
                url: '/pages/crm/customer/createCustomer'
            });
		},
		// 写新跟进
		addFollow() {
			uni.navigateTo({
                url: '/pages/follow/addFollow'
            });
		},
		// 写新订单
		addOrder() {
			uni.navigateTo({
                url: '/pages/order/addOrder'
            });
		},
		// 
		addRefund() {
			uni.navigateTo({
                url: '/pages/payment/addPayment'
            });
		},
		goSearch() {
			uni.navigateTo({
                url: '/pages/other/search'
            });
		},
		noMessage() {
			this.$http.get('/app/notification/list', { pageSize: 1, pageNum: 1, status: 1 }).then(res => {
				if (res.code == 200) {
					if(res.total) {
						uni.setTabBarBadge({ //显示数字  
							index: 3, //tabbar下标
							text: String(res.total) //此处一定要为字符串
						})
					}
				} 
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.content {
	background: rgba(247, 248, 250, 1);
}

.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		display: none;
	}
}

.input-view {
	width: 100%;

	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}

	/deep/.u-tabs__wrapper__nav__line {
		background: rgba(77, 172, 177, 1) !important;
	}
}

.popup-container {
	background: white;
	padding: 64rpx 44rpx;
	border-radius: 20rpx 20rpx 0 0;
	.popup-content {
		display: flex;
		justify-content: space-between;
		> view {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(12, 16, 25, 1);
		}
	}
	.drawer-footer {
		text-align: center;
		margin-top: 92rpx;
	}
}

// .tab-view {
// 	width: 100%;
// 	display: flex;
// 	align-items: center;
// 	justify-content: space-between;
// 	font-size: 36rpx;
// 	color: rgba(103, 117, 133, 1);
// 	font-weight: 500;
// 	.active {
// 		color: rgba(12, 16, 25, 1);
// 	}
// }
</style>
